<template>
  <div>
    <div class="flex">
      <el-radio-group v-model="type" size="large" @change="pieChange">
        <el-radio-button label="sale_">销量</el-radio-button>
        <el-radio-button label="_money">销售额</el-radio-button>
      </el-radio-group>
      <el-select
        v-model="day"
        class="m-2"
        placeholder="Select"
        size="large"
        @change="pieChange"
      >
        <el-option label="昨天" value="yesterday" />
        <el-option label="今天" value="today" />
        <el-option label="前3天" value="three_days" />
        <el-option label="前7天" value="seven_days" />
        <el-option label="前14天" value="fourteen_days" />
        <el-option label="前1个月" value="thirty_days" />
        <el-option label="前2个月" value="sixty_days" />
      </el-select>
    </div>
    <div id="pie" style="height: 400px"></div>
    <div class="whole">全国销量分布图</div>
    <div id="map" style="height: 600px"></div>
  </div>
</template>

<script setup lang="ts">
import * as echarts from "echarts";
import { onMounted, ref } from "vue";
import { statApi } from "./api";
import china from "@/json/china.json";
type EChartsOption = echarts.EChartsOption;
type dayEmnu =
  | "yesterday"
  | "today"
  | "three_days"
  | "thirty_days"
  | "sixty_days"
  | "seven_days"
  | "fourteen_days";

const type = ref<"sale_" | "_money">("sale_");
const day = ref<dayEmnu>("yesterday");
let pieData: SalePie[] = [];
var myChart: echarts.ECharts;
var option: EChartsOption;
let mapData: SaleMap[] = [];

const pieChange = () => {
  const key =
    type.value === "sale_" ? type.value + day.value : day.value + type.value;
  const data = pieData.map((item) => ({
    name: item.name,
    value: item[key],
  }));
  (option.series as echarts.SeriesOption[])[0].data = data;
  myChart.setOption(option);
};

const darwMap = () => {
  //地图
  var mapDom = document.getElementById("map")!;
  var myMap = echarts.init(mapDom);
  echarts.registerMap("china", china as any);
  //地图
  const data: { name: string; value: number }[] = mapData.map((item) => ({
    name: item.areaName,
    value: item.saleNum,
  }));
  myMap.setOption({
    tooltip: {
      trigger: "item",
      formatter: "{b}<br/>销量 : {c}",
      backgroundColor: "rgba(0,0,0,.5)",
      borderColor: "rgba(0,0,0,0)",
      textStyle: {
        color: "#fff",
      },
    },
    visualMap: {
      min: 0,
      max: 1000000,
      realtime: true,
      calculable: true,
      inRange: {
        color: ["#fff", "#ff4806", "#a62a2a"],
      },
    },
    series: [
      {
        type: "map",
        map: "china",
        data,
        emphasis: {
          disabled: false,
          label: {
            show: false,
          },
        },
        select: {
          itemStyle: {
            color: "rgb(136,132,216)",
          },
        },
        zoom: 1.2,
        nameMap: {
          北京市: "北京",
          天津市: "天津",
          河北省: "河北",
          山西省: "山西",
          内蒙古自治区: "内蒙古",
          辽宁省: "辽宁",
          吉林省: "吉林",
          黑龙江省: "黑龙江",
          上海市: "上海",
          江苏省: "江苏",
          浙江省: "浙江",
          安徽省: "安徽",
          福建省: "福建",
          江西省: "江西",
          山东省: "山东",
          河南省: "河南",
          湖北省: "湖北",
          湖南省: "湖南",
          广东省: "广东",
          广西壮族自治区: "广西",
          海南省: "海南",
          重庆市: "重庆",
          四川省: "四川",
          贵州省: "贵州",
          云南省: "云南",
          西藏自治区: "西藏",
          陕西省: "陕西",
          甘肃省: "甘肃",
          青海省: "青海",
          宁夏回族自治区: "宁夏",
          新疆维吾尔自治区: "新疆",
          台湾省: "台湾",
          香港特别行政区: "香港",
          澳门特别行政区: "澳门",
          // "南海诸岛": '',
        },
      },
    ],
  });
};

onMounted(() => {
  //扇形数据图
  var chartDom = document.getElementById("pie")!;
  myChart = echarts.init(chartDom);

  statApi().then((res) => {
    //扇形数据图
    pieData = res.data.salePie;
    //地图数据
    mapData = res.data.saleMap;
    const data: any[] = pieData.map((item) => ({
      name: item.name,
      value: item.sale_yesterday,
    }));
    option = {
      tooltip: {
        trigger: "item",
        backgroundColor: "rgba(0,0,0,.5)",
        textStyle: {
          color: "#fff",
        },
        formatter: "{b}: {c} ({d}%)",
      },

      legend: {
        orient: "vertical",
        left: "right",
        height: 100,
      },
      series: [
        {
          type: "pie",
          radius: ["40%", "70%"],
          data,
          label: {
            color: "inherit",
          },
        },
      ],
    };
    option && myChart.setOption(option);
    //绘制地图模板
    darwMap();
  });
});
</script>

<style scoped lang="less">
.flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 20px;
}
.whole {
  text-align: center;
  padding: 15px;
  &::before {
    content: "";
    width: 100%;
    height: 1px;
    // border-bottom: 1px solid #ccc;
  }
}
</style>
